import cloneDeep from "lodash/cloneDeep";
import defaultsDeep from "lodash/defaultsDeep";
import {
  getTableProps,
  // getTableDefaultValue,
  getDefaultColumnProps,
  unTableConfig,
} from "../un-table/config";

export const getDefaultColumnEditRender = () => ({
  enabled: true,
  // 编辑时使用的第三方组件，非内置，默认element input
  componentName: "el-input",
  autofocus: ".el-input__inner",
});

export const getDefaultColumn = (field, title) =>
  defaultsDeep(
    {
      colId: "col_" + field,
      title,
      field,
      editRender: getDefaultColumnEditRender(),
    },
    getDefaultColumnProps()
  );

export const getUnDTableDefaultValue = () => ({
  colSize: 2,
  rowSize: 2,
  columns: [getDefaultColumn("0", "第1列"), getDefaultColumn("1", "第2列")],
  data: [
    { 0: "", 1: "" },
    { 0: "", 1: "" },
  ],
});

export const unDTableProps = defaultsDeep(
  {
    value: {
      default() {
        return getUnDTableDefaultValue();
      },
    },
    // 增加默认值，用于渲染表格列
    defaultValue: {
      default() {
        return getUnDTableDefaultValue();
      },
    },
    border: {
      type: Boolean,
      default: true,
    },
    // 动态表格特有熟悉
    // 表头加粗
    isBold: {
      // 是否加粗
      type: Boolean,
      default: false,
    },
    headerBgColor: {
      type: String,
      default: "rgb(204, 204, 204)",
    },
    showFooterBtn: {
      type: Boolean,
      default: true,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
  },
  getTableProps()
);

export function transferOldValue(val) {
  if (val) {
    // 兼容老数据，将老数据转成新数据格式:
    // 最老的数据，第一版：{ data: { shape: [2, 3], header: [], content: [] } }
    // 第二版老数据：{ colSize: 2, rowSize: 3, header: [], content: [] }
    // 最新的数据： { colSize: 2, rowSize: 3, columns: [], data: [] }
    const { colSize, rowSize, shape, columns, header, data, content, ...rest } =
      !Array.isArray(val.data) && typeof val.data === "object" && val.data
        ? val.data
        : val;
    return {
      colSize: colSize || (shape && shape[1]),
      rowSize: rowSize || (shape && shape[0]),
      columns:
        columns ||
        (header
          ? header.map((title, idx) => getDefaultColumn(`${idx}`, title))
          : []),
      data:
        data ||
        // 将老数据的二维数组，转化成以角标为键值的对象
        (content
          ? content.map((rowData) =>
              rowData.reduce((pre, curr, currIdx) => {
                pre[currIdx] = curr;
                return pre;
              }, {})
            )
          : []),
      ...rest,
    };
  }
  return getUnDTableDefaultValue();
}

export const getDefaultEditConfig = () =>
  cloneDeep({
    enabled: true,
    trigger: "click",
    mode: "cell",
    showIcon: false,
    activeMethod({ column }) {
      return column.editRender && column.editRender.enabled !== false;
    },
  });

export const UnDTableConfig = defaultsDeep(
  {
    __config__: {
      label: "动态表格",
      showLabel: true,
      changeTag: false,
      tag: "UnDTable",
      tagIcon: "table",
      defaultValue: getUnDTableDefaultValue(),
      required: true,
    },

    height: 300, // 编辑器高度
    headerBgColor: "rgb(204, 204, 204)", // 背景颜色
    isBold: false, // 是否加粗
    showHeader: true, //是否显示表头
    showFooterBtn: true, // 是否显示按钮

    border: true,
    size: "small",
    // 编辑操作
    editConfig: { enabled: true, showIcon: false },
  },
  cloneDeep(unTableConfig)
);
